<template>
    <div class="login-view">
        <h1>
            <a href="javascript:history.go(-1);">取消</a>登入Vue
        </h1>
        <form method="get" @submit.prevent="onSubmit()" autocomplete="off">
            <p v-if="error" class="tip error">{{error}}</p>
            <div class="form-user">
                <label>
                    <strong>邮箱</strong>
                    <input type="email" name="email" v-model.trim="email" placeholder="邮箱" />
                </label>
            </div>
            <div class="form-pwd">
                <label>
                    <strong>请输入Token</strong>
                    <template v-if="passType === 'password'">
                        <input type="password" name="token" v-model.trim="token" placeholder="Token" :key="12" />
                    </template>
                    <template v-if="passType === 'text'">
                        <input type="text" name="token" v-model.trim="token" placeholder="Token" :key="12"/>
                    </template>
                    <span class="show-pwd" :class="{show:isShow}" @click="showPwd"></span>
                </label>
            </div>
            <div class="form-btn">
                <button class="submit" type="submit" :disabled="isDisabled" :class="{disabled: isDisabled}">
                    {{loginState}}
                </button>
            </div>
        </form>
        <div class="footer">
            <div class="more-login">使用其他的方式登录 &amp; 找回密码</div>
            <div class="btns">
                <router-link :to="{name: 'RegisterView'}">注册账号</router-link>
                <a href="https://cn.vuejs.org/v2/guide/">学习Vue</a>
            </div>
        </div>
    </div>
</template>

<script>

import {mapGetters, mapState} from 'vuex'
export default {
    name: 'login-view',
    data() {
        return {
            error: '',
            passType: 'password',
            isShow: '',
            loginState: '登录',
            isDisabled: false
        }
    },
    computed: {
        email: {
            get: function(){
                return this.$store.state.user.login_email;
            },
            set: function(newVal){
                this.$store.state.user.login_email = newVal;
            }
        },
        token: {
            get: function(){
                return this.$store.state.user.login_token;
            },
            set: function(newVal){
                this.$store.state.user.login_token = newVal;
            }
        }
    },
    watch: {
        email: function(){
            console.log('1watch');
        }
    },
    methods: {
        showPwd: function(){
            this.isShow = this.isShow ? false : true;
            this.isShow ? this.passType = 'text' : this.passType = 'password'
        }, 
        beforeSubmit: function(){ //提交之前改变按钮的状态
            if(this.email == '') {
                this.error = '请输入邮箱';
                setTimeout(() => {
                    this.error = "";
                }, 1000)
                return false;
            }

            if(this.token == '') {
                this.error = "请输入Token";
                setTimeout(() => {
                    this.error = '';
                }, 1000)
                return false
            }
            this.isDisabled = true;
            this.loginState = '正在登录...';
            return true;
        },
        onSubmit: function(){
            this.beforeSubmit() && this.$store.dispatch('login', {
                email: this.email,
                token: this.token
            }).then(res => {
                if(res.stateCode == 1) {
                    alert(res.msg);
                    this.error = '';
                    debugger;
                    this.$router.push({name: 'HomeView'});
                } else {
                    this.error = res.msg;
                    this.loginState = '登录';
                    this.isDisabled = false;
                }
            }).catch(err => {
                console.log(err);
            })
        }
        
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            if(vm.$store.getters.currentUser.email) {
                vm.$router.push({name: 'HomeView'})
            } else {
                next();
            }
        })
    },
    created() {
        if(sessionStorage.getItem('email')) {
            this.$store.commit({
                type: 'getLocalUser'
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .login-view {
        h1 {
            height: 4.5rem;
            margin: 0 0 1rem;
            padding:0 1.8rem;
            line-height: 4.5rem;
            background: #fff;
            border-bottom: 1px solid #eee;
            text-align: center;
            font-size: 1.8rem;
            font-weight: bold;
            position: relative;
        & a {
            float: left;
            color: #42bd56;
            font-size:1.5rem;
            font-weight: normal;
            position: absolute;
            left: 1.8rem;
        }
        }
        form {
            padding: 2rem 1.5rem;
            .tip {
                color: red;
            }

            strong {
                font-size: 1.5rem;
                color: #222;
                display: none;
            }
            input[type="email"], input[type="text"], input[type="password"] {
                width: 100%;
                display: inline-block;
                height: 4.4rem;
                padding: 0 0.8rem;
                border: 0.1rem solid #ccc;
                background: #fff;
                box-sizing: border-box;
                border-radius: 0.3rem;
                outline: none;
            }
            .form-pwd {
                position: relative;

                .show-pwd {
                    position: absolute;
                    right: 0.2rem;
                    top: 0;
                    background-image: url();
                    height: 100%;
                    width: 3.2rem;
                    background-repeat: no-repeat; 
                    background-position:center center;
                    background-size: 2.2rem; 
                    z-index: 3;
                    &.show {
                        background-image: url();
                    }
                }
            }
            .submit {
                cursor: pointer;
                width: 100%;
                padding: 1.2rem 2.6rem;
                margin-top:1rem;
                font-size: 1.7rem;
                text-align: center;
                color: #fff;
                background: #17AA52;
                border: 0.1rem solid #17AA52;
                border-radius: 0.3rem;
            }
            .disabled {
                cursor: not-allowed;
                background: #eee;
                border: none;
            }
        }
        .footer {
            .more-login {
                font-size: 1.5rem;
                color: #aaa;
                text-align: center;
            }
            .btns {
                margin-top:4rem;
                text-align: center;
                font-size: 1.5rem;
                a {
                    color: #42bd56;
                    margin-right: 1.5rem;
                } 
            }
        }
    }
</style>

